<template>
  <div style="display: flex; height: 100vh;">
    <!-- 左侧菜单栏 -->
    <div :style="{ width: isCollapse ? '64px' : '240px' }">
      <el-menu
          background-color="#3c82f5"
          style="width: 100%; height: 100vh;"
          text-color="#fff"
          active-text-color="#ff0"
          :collapse="isCollapse"
          unique-opened
          router
          :collapse-transition="false"
      >
<!--        &lt;!&ndash; 菜单顶部条 &ndash;&gt;
        <el-row style="padding-top: 10px; border-bottom: 1px solid rgba(255,255,255,0.2);">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <el-avatar src="/imgs/admin/logo.png" style="width: 35px; height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">
            <span style="color:#fff; font-weight:bold; position:relative; top:8px; left:1px;">LBS智慧营销平台</span>
          </el-col>
        </el-row>-->
        <el-row style="padding-top: 10px; border-bottom: 1px solid rgba(255,255,255,0.2);">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 3px;">
            <el-avatar src="/imgs/admin/logo.png" style="width: 35px; height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse ? 0 : 14">
            <span style="color:#fff; font-weight:bold; position:relative; top:8px; left:-20px; font-size:17px;">LBS智慧营销平台</span>
          </el-col>
        </el-row>

        <!-- 店铺管理 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px;"><Shop /></el-icon>
            <span v-if="!isCollapse">店铺管理</span>
          </template>
          <el-menu-item index="/shop">店铺列表</el-menu-item>
          <el-menu-item index="/code">二维码管理</el-menu-item>
        </el-sub-menu>

        <!-- 内容管理 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;"><Document /></el-icon>
            <span v-if="!isCollapse">内容管理</span>
          </template>
          <el-menu-item index="/articleList">文章列表</el-menu-item>
          <el-menu-item index="/category">分类管理</el-menu-item>
          <el-menu-item index="/creation">推文创作</el-menu-item>
        </el-sub-menu>

        <!-- 用户管理 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px;"><User /></el-icon>
            <span v-if="!isCollapse">用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
          <el-menu-item index="/crowdList">人群管理</el-menu-item>
        </el-sub-menu>

        <!-- 营销管理 -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px;"><Promotion /></el-icon>
            <span v-if="!isCollapse">营销管理</span>
          </template>
          <el-menu-item index="/activity">活动管理</el-menu-item>
          <el-menu-item index="/coupon">优惠券管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px;"><MessageBox/></el-icon><span>触达管理</span>
          </template>
          <el-menu-item index="/push">定时推送</el-menu-item>
          <el-menu-item index="/times">定时消息</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div :style="{ width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)' }">
      <!-- 顶部栏 -->
      <el-header style="height: 10vh; background-color: #fff; padding: 0 20px; display: flex; flex-direction: column; justify-content: center;">
        <!-- 顶部操作区 -->
        <el-row :gutter="10" style="align-items: center;">
          <!-- 折叠按钮 -->
          <el-col :span="1">
            <el-icon
                style="font-size: 20px; cursor: pointer;"
                @click="changeCollapse"
            >
              <Expand v-if="!isCollapse" />
              <Fold v-else />
            </el-icon>
          </el-col>

          <!-- 面包屑 -->
          <el-col :span="20">
            <el-breadcrumb separator="/" style="font-size: 14px;">
              <el-breadcrumb-item :to="`${BASE_URL}`">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item, idx) in breadcrumb" :key="idx">{{ item }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>

          <!-- 用户信息 -->
          <el-col :span="3" style="text-align: right;">
            <el-dropdown trigger="click">
              <div style="cursor: pointer; display: flex; align-items: center; justify-content: flex-end;">
                <el-avatar :src="user.avatar || defaultAvatar" style="width: 32px; height: 32px; margin-right: 8px;"></el-avatar>
                <span style="font-size: 14px;">{{ user.username || '匿名用户' }}</span>
                <el-icon style="margin-left: 4px;"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <!-- 主体内容 -->
      <el-main style="height: 90vh; padding: 20px; overflow-y: auto;">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 引入 Element Plus 图标
import {
  Shop, Document, User, Promotion, Message,
  Expand, Fold, ArrowDown
} from '@element-plus/icons-vue';

// 基础URL（从main.js或全局配置获取）
const BASE_URL = '/';

// 控制菜单折叠
const isCollapse = ref(false);
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 获取用户信息（模拟，实际应从 store 或接口获取）
const user = ref({
  username: 'user',
  avatar: ''
});
const defaultAvatar = 'https://cdn.jsdelivr.net/gh/flutterchina/flutter-in-action@1.0/docs/imgs/avatar.png';

// 退出登录
/*const logout = () => {
  if (confirm('您确认要退出吗？')) {
    localStorage.removeItem('user');
    window.location.href = '/login';
    user.value = {};
  }
};*/
// 退出登录
const logout = () => {
  if (confirm('您确认要退出吗？')) {
    localStorage.removeItem('isAuthenticated');
    router.push('/login');
  }
};

// 面包屑映射（与路由path完全匹配）
const breadcrumbMap = {
  '/push': ['触达管理', '定时推送'],
  '/times': ['触达管理', '定时消息'],
  '/code': ['店铺管理', '二维码管理'],
  '/shop': ['店铺管理', '店铺列表'],
  '/articleList': ['内容管理', '文章列表'],
  '/category': ['内容管理', '分类管理'],
  '/creation': ['内容管理', '推文创作'],
  '/activity': ['营销管理', '活动管理'],
  '/addActivity': ['营销管理', '活动管理','新建活动'],
  '/coupon': ['营销管理', '优惠券管理'],
  '/crowdList': ['用户管理', '人群列表'],
  '/user': ['用户管理', '用户管理'],
};

const breadcrumb = ref([]);
const route = useRoute();
const router = useRouter();

// 初始化面包屑
onMounted(() => {
  updateBreadcrumb(route);
});

// 监听路由变化更新面包屑
watch(
    () => route.path,
    (newPath) => {
      updateBreadcrumb(route);
    }
);

// 更新面包屑方法（增加未匹配路由的处理）
const updateBreadcrumb = (currentRoute) => {
  const path = currentRoute.path;
  // 优先从breadcrumbMap获取，未匹配时使用路由元信息（若有）
  breadcrumb.value = breadcrumbMap[path] || (currentRoute.meta.breadcrumb || []);

  // 未匹配且无元信息时，显示当前路由名称（用于调试）
  if (!breadcrumb.value.length && currentRoute.name) {
    breadcrumb.value = [currentRoute.name];
  }
};

// 全局路由守卫
router.beforeEach((to, from, next) => {
  updateBreadcrumb(to);
  next();
});
</script>

<style scoped>
/* 可选：自定义样式优化 */
.el-menu {
  border-right: none;
}

.el-header {
  border-bottom: 1px solid #f0f0f0;
}

.el-breadcrumb {
  line-height: 32px;
}
</style>